<template>
<div class="col-md-12">
  <open-window-detail></open-window-detail>
  <my-navbar>
    <template slot="left"> 
      <select-lcd :on-change="onLcdChange"></select-lcd>
    </template>
    <template slot="right">   
      <button class="btn btn-default" @click.prevent="onOpenWindow">
        <span class="glyphicon glyphicon-th"></span> {{$t('open.title')}}
      </button>   
      <button class="btn btn-default" @click.prevent="onClearWindow">
        <span class="glyphicon glyphicon-unchecked"></span> {{$t('common.clear')}}
      </button>
      <button class="btn btn-default" @click.prevent="onSaveWindowByName">
        <span class="glyphicon glyphicon-download-alt"></span> {{$t('local.saveLayout')}}
      </button>
      <button class="btn btn-default" @click.prevent="onRefresh">
        <span class="glyphicon glyphicon-refresh"></span> {{$t('common.refresh')}}
      </button>          
    </template> 
  </my-navbar>  
  <div class="col-md-12">
    <my-table :cfg="cfg" 
      :list="streamsrc.list" 
      :loading="streamsrc.loading" 
      :set-checked="setStreamChecked"></my-table>
  </div>
</div>
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import {printObj} from 'libs/utils.js'
import locales from '../locales/lcdWindow.js'
import OpenWindowDetail from './OpenWindowDetail.vue'
import {List} from '../configs/lcdWindow.js'
import {setStreamChecked, setStreamAllUnchecked} from 'share/server/vuex/actions/streamsrc.js'
import {currLcdInfo} from 'share/server/vuex/getters.js'
import {saveLcdLayoutByName, setLcdWindows} from 'share/server/utils.js'
import SelectLcd from 'share/server/components/SelectLcd.vue'

export default {
  locales,
  components: {
    'select-lcd': SelectLcd,
    'open-window-detail': OpenWindowDetail,
  },
  vuex: {
    getters: {
      currLcdInfo,
      vidlayout: (state) => state.vidlayout,
      streamsrc: (state) => state.streamsrc,
      lcdTopoDev: (state) => state.lcd.topoDev,
    },
    actions: {
      setStreamChecked,
      setStreamAllUnchecked,
    }
  },
  data () {
    return {
      cfg: {
        checkable: true,
        showHead: true,
        columns: new List(this)      
      }
    }
  },
  methods: {
    onLcdChange () {
      this.setStreamAllUnchecked()
    },
    onOpenWindow () {
      let count = _.countBy(this.streamsrc.list, (item) => {
        return item._checked ? 'checked': 'unchecked'
      })
      if (!count.checked) {
        toast.e(this, this.$t('common.fail'), this.$t('error.unselected'))
        return
      } else if (count.checked > 16) {
        toast.w(this, this.$t('common.warning'), this.$t('error.tooManyItems'))
      }
      if (this.lcdTopoDev.topoId < 0) {
        toast.e(this, this.$t('common.fail'), this.$t('error.invalidLcd'))
        return
      }
      let lcdInfo = this.currLcdInfo
      ebus.emit('show-open-window-detail', lcdInfo)
    },
    onClearWindow () {
      let lcdInfo = this.currLcdInfo
      if (lcdInfo) {
        setLcdWindows(lcdInfo.topoId, 
          lcdInfo.multiScreenX, 
          lcdInfo.multiScreenY, []).then(function(res) {
          if (res && res.data && res.data.code === 0) {
            toast.s(this, this.$t('common.success'), '')
          } else {
            toast.code(this, res.data)
          }
        }.bind(this))
      }
    },
    onSaveWindow (layoutName) {
      let lcdInfo = this.currLcdInfo
      if (lcdInfo) {     
        saveLcdLayoutByName(lcdInfo.topoId, layoutName).then(function(res) {
          if (res && res.data && res.data.code === 0) {
            toast.s(this, this.$t('common.success'), '')
            ebus.emit('load-vid-layouts')
          } else {
            toast.code(this, res.data)
          }
        }.bind(this))
      }
    },
    onSaveWindowByName () {
      let lcdInfo = this.currLcdInfo
      let dftLayoutName = `default@${lcdInfo.name}`
      msgbox.alert({
        title: '',
        text: this.$t('alert.plzInput', {name: this.$t('params.layoutname')}),
        type: "input",
        inputValue: dftLayoutName,
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        cancelButtonText: this.$t('common.cancel'),
        confirmButtonText: this.$t('common.confirm'),
        closeOnConfirm: false        
      }, 
      function(input) {
        if (input === '') {
          toast.e(this, this.$t('common.fail'), this.$t('error.params'))
        } else {
          this.onSaveWindow(input)
          msgbox.close()
        }
      }.bind(this))
    },
    onRefresh () {
      ebus.emit('load-stream-srcs')
    }
  }
}
</script>

<style>
</style>